<template>
  <div>
    <TopBar color="#fff" style="backgroundColor:transparent"></TopBar>
    <div class="contentBox1">
      <div class="activiyContent">
        <div id="loginContentBox">
          <LoginInput title="手机号"  @getValue="getPhone"></LoginInput>
          <LoginInputCode @getValue="getCode" :phone="phone" type="reg"></LoginInputCode>
          <LoginInput type="pwd" title="密码" @getValue="getPwd"></LoginInput>
          <div id="loginBtn" @click="registBtn">注册尽享加息返利</div>
        </div>
      </div>
    </div>
    <div class="bg2"></div>
    <toast 
      v-model="showPositionValue" 
      type="text" 
      :time="2000" 
      is-show-mask 
      :text="msg" 
      position="middle">
    </toast>
  </div>
</template>
<script>
import TopBar from '../../component/common/TopBar'
import LoginInput from '../../component/common/LoginInput'
import LoginInputCode from '../../component/common/LoginInputCode'
import { XImg } from 'vux'
import {verify,showMsg,getStore,setStore} from '../../../config/mUtils'
import { Toast } from 'vux'
import {register} from '../../../service/getData'
import { clearTimeout } from 'timers';
import { querystring } from 'vux' 

import {getSDK} from '../../../service/wxShare.js'

let time = null

export default {
  components:{
    TopBar,
    XImg,
    LoginInput,
    LoginInputCode,
    Toast
  },
  beforeCreate(){
    getSDK()
  },
  created(){
    this.yqm = querystring.parse()['yqm']||''
  },
  data(){
    return {
      list:[
        '../../../../static/assets/registbg1.jpg',
        '../../../../static/assets/registbg2.jpg',
      ],
      phone:'',
      pwd:'',
      code:'',
      msg:'',
      showPositionValue:false,
      yqm:''
    }
  },
  methods:{
    getPhone(data){
      this.phone = data;
    },
    getPwd(data){
      this.pwd = data;
    },
    getCode(data){
      this.code = data;
    },
    registBtn(){
      if(this.phone == ''){
        showMsg('请输入手机号',this)
      }else if(this.pwd == ''){
        showMsg('请输入密码',this)
      }else if(this.code == ''){
        showMsg('请输入短信验证码',this)
      }else if(!verify(this.phone,1)){
        showMsg("手机号格式错误",this)
      }
      else if(!verify(this.pwd,2)){
        showMsg("密码为6-16位非汉字字符",this)
      }else if(!verify(this.code,3)){
        showMsg("短信验证码错误",this)
      }else{
        
        // console.log(`${this.phone}/${this.pwd}/${this.code}/${this.yqm}`)
        register(this.phone,this.pwd,this.code,this.yqm,this.yqm)
          .then(res=>{
            //console.log(res)
            if(res.status == 1){
              setStore('loginkey',res.info.loginkey);
              setStore('phone',res.info.loginname)
              time = setTimeout(()=>{
                this.$router.replace('/home')
              },2000)
            }
            showMsg(res.msg,this)
          })
      }
    }
  },
  beforeDestroy(){
    // clearTimeout(time)
  }
}
</script>
<style lang="less">
@import '../../../style/mixin.less';
  .contentBox1{
    // position: relative;
    .bs();
    .fx(column,flex-end);
    .wh(100%,15.3733rem);
    padding-bottom: 4%;
    background: url('../../../../static/assets/registbg1.jpg') 100% 100% no-repeat;
    background-size: 100%
  }
  .bg2{
    .wh(100%,8.1867rem);
    background: url('../../../../static/assets/registbg2.jpg') 100% 100% no-repeat;
    background-size: 100%;
    margin-top: -.05rem;
  }
  img{
    // float: left;
    width:100%
  }
  .activiyContent{
    // position: absolute;
    // bottom: 3%;
    // left: 9%;
    width:82%;
    .bg(transparent);
    #loginBtn{
      width: 100%;
      height: 1.2rem;
      background-color: #e44c2c;
      border-radius: 2rem;
      margin-top: 1.0667rem;
      color: #fff;
      text-align: center;
      line-height: 1.2rem;
      font-size: 0.4rem;
    }
  }
  .weui-toast,.weui-toast_text,.vux-toast-middle{
    width: 70% !important;
  }
</style>
